<script lang="ts" setup>
import Motion from "@/utils/motion";
import {type QueryList} from "./index";
import { Search,Refresh } from '@element-plus/icons-vue'
import {reactive} from "vue";

defineOptions({
  name: "SearchHeader"
});

//搜索参数
const settings = defineProps({
  formSpan: {
    type: Number,
    default: 6
  },
  buttonSpan:{
    type: Number,
    default: 6
  },
  queryList:{
    type: Array as PropType<QueryList>,
    required:true
  }
})

//搜索参数
const queryForm = reactive({})
settings.queryList.forEach((query) => {
  queryForm[query.key] = null
})

//搜索时间
const emits = defineEmits(['search'])
//搜索
const searchHandler = ()=>{
  emits('search',queryForm)
}
//重置
const resetHandler = ()=>{
  Object.keys(queryForm).forEach((key)=>{
    queryForm[key] = null
  })
  emits('search',{})
}
</script>

<template>
  <Motion :delay="100">
    <el-form :model="queryForm" class="searchHeader" label-position="right" label-width="auto">
      <el-row :gutter="20" class="searchRow">
        <el-col v-for="(item,index) in queryList" :key="index" :span="settings.formSpan">
          <el-form-item :label="item.label" :prop="item.key">
            <!--          输入框-->
            <el-input v-if="!item.type || item.type === 'input'" v-model="queryForm[item.key]" :placeholder="`请输入${item.label}`" clearable @clear="searchHandler" @keyup.enter="searchHandler" />
            <!--          选择框-->
            <el-select v-if="item.type === 'select'" v-model="queryForm[item.key]" :placeholder="`请选择${item.label}`" clearable filterable @change="searchHandler">
              <el-option v-for="(option,oIndex) in item.options" :key="oIndex" :label="option.label" :value="option.value" />
            </el-select>
            <!--          日期选择框-->
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="queryForm[item.key]"
              :placeholder="`请选择${item.label}`"
              clearable
              format="YYYY-MM-DD"
              type="date"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="settings.buttonSpan">
          <el-button :icon="Search" circle type="primary" @click="searchHandler" />
          <el-button :icon="Refresh" circle type="primary" @click="resetHandler" />
          <slot name="button" />
        </el-col>
      </el-row>
    </el-form>
  </Motion>
</template>

<style lang="scss" scoped>
.searchHeader {
  border-radius: 1vh;
  padding: 1vh 1.5vh;
  background-color: #fff;
  box-shadow: -.6vh .6vh #eeeeee;

  .searchRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    :deep(.el-col):nth-child(n+5) {
      margin-top: 1vh;
    }

    :deep(.el-form-item) {
      margin: 0;
    }
  }
}
</style>
